enhance: context menu on custom reports page #3776
Conversation
actual-github-bot
bot
changed the title
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller No assets were smaller Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
UnderKoen
changed the title
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/desktop-client/src/components/reports/ReportCard.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-eslint-plugin". (The package "eslint-plugin-eslint-plugin" was not found when loaded as a Node module from the directory "/packages/eslint-plugin-actual".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-eslint-plugin" was referenced from the config file in "packages/eslint-plugin-actual/.eslintrc.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. WalkthroughThe pull request modifies the Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3776.mdis excluded by!**/*.md
📒 Files selected for processing (1)
packages/desktop-client/src/components/reports/ReportCard.tsx(3 hunks)
🔇 Additional comments (6)
packages/desktop-client/src/components/reports/ReportCard.tsx (6)
11-11: Importing useFeatureFlag is correctly added
The import statement is necessary for the feature flag usage in the component.
129-134: State variables initialized for context menu functionality
The addition of viewRef, menuOpen, crossOffset, offset, and contextMenusEnabled sets up the necessary state and references for managing the context menu.
135-135: isContextMenu derived state implemented correctly
The isContextMenu variable accurately determines when the context menu is active.
139-147: Context menu event handler correctly implemented
The onContextMenu handler appropriately activates the context menu when the feature flag is enabled and calculates the positioning offsets based on the mouse event.
176-181: Resetting offsets and updating menu state on button press
The MenuButton correctly resets crossOffset and offset and updates menuOpen to 'button' when pressed.
187-193: Popover component configured appropriately for different menu triggers
The Popover component uses the correct triggerRef, placement, and offsets based on whether the context menu or button menu is active.
|
This will probably need gated by the reports dashboard feature flag since it is using the dashboard features in the menu. |
…_menus/reports_page # Conflicts: # packages/desktop-client/src/components/reports/ReportCard.tsx
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
171-179: Reconsider offset reset in MenuButton handler.The MenuButton handler resets both offsets to 0, which might cause the menu to appear in an unexpected position when toggling between context menu and button menu states. Consider preserving the last known good position or calculating appropriate offsets based on the button's position.
<MenuButton ref={triggerRef} onPress={() => { - setCrossOffset(0); - setOffset(0); + const rect = triggerRef.current?.getBoundingClientRect(); + if (rect) { + setCrossOffset(rect.width); + setOffset(0); + } setMenuOpen('button'); }} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
packages/desktop-client/src/components/reports/ReportCard.tsx(3 hunks)
🧰 Additional context used
📓 Learnings (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
Learnt from: UnderKoen
PR: actualbudget/actual#3776
File: packages/desktop-client/src/components/reports/ReportCard.tsx:165-167
Timestamp: 2024-11-10T16:45:31.225Z
Learning: In `ReportCard.tsx`, the usage of `className=[menuOpen ? undefined : 'hover-visible', NON_DRAGGABLE_AREA_CLASS_NAME].join(' ')` in the `Layout` function is intentional and does not cause styling issues in the codebase.
🔇 Additional comments (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
123-126: LGTM! Well-structured state management.
The state management is well-implemented with:
- Proper TypeScript union type for menu states
- Clear separation of positioning states
- Appropriate use of refs for DOM references
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
136-143: Consider enhancing menu positioning robustnessWhile the core implementation is solid, consider adding viewport boundary checks to ensure the menu stays within visible bounds.
onContextMenu={e => { if (!contextMenusEnabled) return; e.preventDefault(); setMenuOpen('context'); const rect = e.currentTarget.getBoundingClientRect(); - setCrossOffset(e.clientX - rect.left); - setOffset(e.clientY - rect.bottom); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + const newCrossOffset = Math.min( + e.clientX - rect.left, + viewportWidth - rect.width + ); + const newOffset = Math.min( + e.clientY - rect.bottom, + viewportHeight - rect.height + ); + setCrossOffset(newCrossOffset); + setOffset(newOffset); }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
upcoming-release-notes/3776.mdis excluded by!**/*.md
📒 Files selected for processing (1)
packages/desktop-client/src/components/reports/ReportCard.tsx(3 hunks)
🧰 Additional context used
📓 Learnings (1)
packages/desktop-client/src/components/reports/ReportCard.tsx (1)
Learnt from: UnderKoen
PR: actualbudget/actual#3776
File: packages/desktop-client/src/components/reports/ReportCard.tsx:165-167
Timestamp: 2024-11-10T16:45:31.225Z
Learning: In `ReportCard.tsx`, the usage of `className=[menuOpen ? undefined : 'hover-visible', NON_DRAGGABLE_AREA_CLASS_NAME].join(' ')` in the `Layout` function is intentional and does not cause styling issues in the codebase.
🪛 GitHub Check: typecheck
packages/desktop-client/src/components/reports/ReportCard.tsx
[failure] 127-127:
Argument of type '"dashboards"' is not assignable to parameter of type 'FeatureFlag'.
🔇 Additional comments (2)
packages/desktop-client/src/components/reports/ReportCard.tsx (2)
123-126: Well-structured state management for menu positioning
The state management is well-implemented with proper typing and clear separation of concerns between menu state and positioning.
171-189: Clean implementation of menu button and popover integration
The integration handles state transitions properly and uses appropriate refs based on the context. The positioning logic is well-thought-out.
|
This will need altering a bit now that dashboards are released, there's no need for the feature flag anymore |
|
I've found a bug:
|
No description provided.